
import { memo, useEffect, useMemo, useRef, useState } from 'react';
import * as echarts from 'echarts';
import classNames from 'classnames';
import { isObject } from '@multi-kit/inspect'
import { SwitchButton } from '@/components'
import { setProtection } from '@/api/common.api'

export interface Props {
  state: unknown
}

function Protection<Props>(props: Props) {
  const { state } = props;

  const saveAction = (id, state) => {
    setProtection({ id, state })
  }

  return (
    <div className="grid grid-cols-2  ">
      <div className="p-2 text-center border border-slate-700 flex items-center justify-center">电机A</div>
      <div className="p-2 text-center border border-slate-700"><SwitchButton size="small" value={state.motorAProtection} checkedChildren={{ label: "使能", value: 1 }} unCheckedChildren={{ label: "禁止", value: 0 }} onChange={(value) => saveAction(0, value)} ></SwitchButton></div>
      <div className="p-2 text-center border border-slate-700 flex items-center justify-center">电机B</div>
      <div className="p-2 text-center border border-slate-700"><SwitchButton size="small" value={state.motorBProtection} checkedChildren={{ label: "使能", value: 1 }} unCheckedChildren={{ label: "禁止", value: 0 }} onChange={(value) => saveAction(1, value)} ></SwitchButton></div>
    </div>
  );
}

export default memo(Protection)
